<template>
  <div>
    <Card dis-hover>
      <Row :gutter="16">
        <Col span="6">
        <Card>
          <p slot="title">导航</p>
          <p>
            <!-- :render="renderTree" -->
            <Tree :data="tree"
                  @on-select-change="selectItem"
                  ref="tree"></Tree>
          </p>
        </Card>
        </Col>
        <Col span="18">
        <div class="btns">

          <Button @click="add()"
                  type="primary"
                  :style="{marginRight:'10px'}">添加菜单</Button>
          <Button @click="add()"
                  type="primary"
                  :style="{marginRight:'10px'}">添加字典</Button>
          <Button @click="add()"
                  type="primary">添加字典项</Button>
        </div>
        <Table border
               :columns="columns"
               :data="list"></Table>
        </Col>
      </Row>
    </Card>
    <create v-model="createModalShow"
            @save-success="load()"></create>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Inject, Prop, Watch } from "vue-property-decorator";
import Util from "@/lib/util";
import AbpBase from "@/lib/abpbase";
import { FieldType, Filter, CompareType } from "@/store/entities/filter";
import Create from "./create.vue";
import http from "@/lib/ajax";
@Component({ components: { Create } })
export default class Index extends AbpBase {
  split1: number = 0.5;
  createModalShow: boolean = false;
  list: Array<any> = [];
  tree: Array<any> = [];
  columns = [
    { title: "id", key: "id", width: 70 },
    { title: "id", key: "parentId", width: 70 },
    { title: "名称", key: "key" },
    { title: "值", key: "value" },
    { title: "分类", key: "type" },
    { title: "静态", key: "isStatic", width: 70 },
    {
      title: "颜色",
      key: "color",
      width: 120,
      render: (h: any, params: any) => {
        return h("span", params.row.id);
      }
    },
    { title: "排序", key: "displayOrder", width: 70 },
    {
      title: "删除",
      key: "displayOrder",
      width: 70,
      render: (h, params) => {
        return h("Icon", {
          props: {
            type: "md-close",
            size: 16
          },
          on: {
            click: () => {
              this.deleteItem(params.row.id);
            }
          }
        });
      }
    }
  ];

  async created() {
    this.load();
    this.loadTree();
  }
  add() {
    this.createModalShow = true;
  }
  load() {
    http.get("/api/services/app/AbpDictionary/GetPaged").then(r => {
      this.list = r.data.result.items;
    });
    this.createModalShow = false;
  }
  loadTree() {
    http.get("/api/services/app/AbpDictionary/GetTree").then(r => {
      this.tree = r.data.result;
    });
  }
  renderTree(h, { root, node, data }) {
    return h("span", [
      h("Icon", { props: { type: "md-close" } }),
      h("span", data.title)
    ]);
  }
  selectItem(a, b, c) {
    console.log(a, b, c);
    alert(a.id);
  }
  deleteItem(id) {
    this.$Modal.confirm({
      title: "确认",
      content: "确认删除吗",
      onOk: () => {
        http
          .delete("/api/services/app/AbpDictionary/Delete?Id=" + id)
          .then(r => {
            if (r.data.success) {
              this.$Notice.success({
                desc: "删除成功"
              });
              this.load();
            }
          });
      }
    });
  }
}
</script>
<style scoped>
.tree {
  height: 100%;
  border: 1px solid #dcdee2;
}
.grid {
  padding: 10;
}
.btns {
  margin-bottom: 5px;
  text-align: right;
}
</style>